<template>
  <div class>
    <div class>角色管理-列表</div>
    <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline search">
      <el-form-item label="名称">
        <el-input v-model="searchForm.realname" size="mini" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="等级">
        <el-input v-model="searchForm.realname" size="mini" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="info" @click="Search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="info" size="mini" @click="addRole">新增</el-button>
      <!-- <el-button type="info" size="mini">修改</el-button> -->
      <!-- <el-button type="info" size="mini">删除</el-button> -->
    </div>
    <el-table :data="userForm" style="width: 100%" :default-sort="{ prop: 'userid' }">
      <el-table-column type="selection" label="全选" width="55"></el-table-column>
      <el-table-column
        prop="userid"
        label="ID"
        sortable
        width="180"
        :default-sort="{ prop: 'userid' }"
      ></el-table-column>
      <el-table-column prop="realname" label="名称"></el-table-column>
      <el-table-column prop="grade" label="等级" sortable></el-table-column>
      <el-table-column prop="grade" label="描述" sortable></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="editRole" type="text" size="small">修改</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSize"
      @current-change="handlePage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <Drawer :isDrawer.sync="isDrawer" :title="'角色管理-新增'" :size="'40%'">
      <Roleadd></Roleadd>
      <template #footer>
        <el-button size="medium" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="medium">保存</el-button>
      </template>
    </Drawer>
    <Drawer :isDrawer.sync="isDrawers" :title="'角色管理-修改'" :size="'40%'">
      <Roleedit></Roleedit>
      <template #footer>
        <el-button size="medium" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="medium">保存</el-button>
      </template>
    </Drawer>
  </div>
</template>

<script >
import * as api from './api'
import Roleadd from './components/roleAdd'
import Roleedit from './components/roleEdit'
import Drawer from '@/components/drawer'
export default {
  name: "",
  components: { Drawer, Roleadd, Roleedit },
  data () {
    return {
      isDrawer: false,//角色新增弹出层
      isDrawers: false,//角色修改弹出层
      searchForm: {
        realname: '',
        orgname: '',
        role: '',
        memberGroup: '',
        type: '',
        status: '',
      },
      userForm: [{
        realname: '用户一',
        userid: 1,
        grade: '管理员'

      }],//用户列表
      total: null,//总条数
      page: 1,//页数
      size: 10,//条数

    }
  },
  created () {
    this.userList()
  },
  methods: {
    // 获取角色列表
    userList () {
      const params = {
        page: this.page,
        limit: this.size
      }
    },
    //搜索
    Search () {
      const params = this.searchForm
      api.userList(params).then(res => {
        if (res.data.code == 200) {
          this.userForm = res.data.form.rows
          this.total = res.data.form.total
        }
      })
    },
    // 新增
    addRole () {
      this.isDrawer = true
    },
    //修改
    editRole () {
      this.isDrawers = true
    },
    //关闭弹出层
    closeDrawer () {
      this.isDrawer = false
      this.isDrawers = false
    },
    //分页器-条数
    handleSize (val) {
      this.size = val
      this.userList()
    },
    //分页器-页数
    handlePage (val) {
      this.page = val
      this.userList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 13px 10px 0;
  margin: 20px 0 30px;
  .el-select {
    width: 100px;
  }
}
.buttons {
  margin: 0 0 10px;
  .el-button {
    box-shadow: 0px 0px 6px rgba(0, 12, 100, 0.2);
  }
}
</style>
